<template>
    <div>
      <div id="navigationBar">
        <div
          v-for="(item, index) in navigationDataLeft"
          :key="index"
          class="navigationItem"
          @click="goto(item.path)"
        >
          <img
            :src="item.iconT"
            alt=""
            v-if="pathname === item.path"
          />
          <img
          :src="item.iconF"
            alt=""
            v-if="pathname !== item.path"
          />
          <p :class="pathname == item.path ? 'active' : ''">{{ item.name }}</p>
        </div>
        <div style="background-color: #fff;">
          <div class="navigationItem">
            <div id="releaseBox">
            </div>
            <div class="releaseIcon">
              <img src="/icon/ze-plus 1.svg" alt="">
            </div>
            <p>发布</p>
          </div>
        </div>
        <div
          v-for="(item, index) in navigationDataRight"
          :key="index"
          class="navigationItem"
          @click="goto(item.path)"
        >
          <img
          :src="item.iconT"
            alt=""
            v-if="pathname === item.path"
          />
          <img
          :src="item.iconF"
            alt=""
            v-if="pathname !== item.path"
          />
          <p :class="pathname === item.path ? 'active' : ''">{{ item.name }}</p>
        </div>
      </div>
    </div>
  </template>
  
  
  
  <script setup>
  import router from "@/router";
  import { onBeforeMount, ref } from "vue";
  let pathname = ref("/" + window.location.pathname.split("/")[1]);
  let navigationDataLeft = ref([
    {
      name: "首页",
      path: "/Home",
      iconT: "/icon/HomeT.svg",
      iconF: "/icon/HomeF.svg",
    },
    {
      name: "地图区",
      path: "/Community",
      iconT: "/icon/MapT.svg",
      iconF: "/icon/MapF.svg",
    }
  ]);
  let navigationDataRight = ref([
    {
      name: "消息",
      path: "/Message",
      iconT: "/icon/MessageT.svg",
      iconF: "/icon/MessageF.svg",
    },
    {
      name: "我的",
      path: "/Mine",
      iconT: "/icon/MyT.svg",
      iconF: "/icon/MyF.svg",
    },
  ]);
  let goto = (path) => {
    router.push(path);
    pathname.value = path
  };
  </script>
  
  <style lang="less" scoped>
  #navigationBar {
    display: flex;
    height: 0.49rem;
    width: 3.75rem;
    position: fixed;
    bottom: 0rem;
    background-color: #fff;
  }
  .navigationItem {
    width: 0.43rem;
    height: 0.43rem;
    text-align: center;
    margin-right: 0.16rem;
    margin-left: 0.16rem;
    background-color: #fff;
  }
  #releaseBox{
    position:absolute;
    z-index: -1;
    left: 1.56rem;
    top: -0.1rem;
    width: 0.63rem;
    height: 0.63rem;
    border-radius: 50%;
    background-color: #fff;
  }
  .navigationItem img {
    width: 0.28rem;
    height: 0.28rem;
    margin-left: -0.13rem;
    position: absolute;
    background-color: #fff;
  }
  .navigationItem p {
    width: 0.43rem;
    height: 0.12rem;
    font-size: 0.1rem;
    text-align: center;
    position: absolute;
    top: 0.2rem;
    background-color: #fff;
  }
  .navigationItem .active {
    color: rgba(247, 109, 123, 1);
  }
  .releaseIcon{
    left: 1.75rem;
    top: 7.38rem;
    margin: 0 auto;
    width: 0.25rem;
    height: 0.25rem;
    border-radius: 0.06rem;
    background-color: rgba(255,153,0,1);
  }
  .releaseIcon img{
    left: 1.92rem;
    top: 0.04rem;
    width: 0.17rem;
    height: 0.17rem;
    position: absolute;
    background-color:rgba(255,153,0,1);
  }
  </style>